<template>
    <div class="coupon_detail">
        <div class="coupon_cover">
            <img :src="coupon.thumbs_cdn" />
        </div>

        <van-notice-bar
            left-icon="volume-o"
            :scrollable="false"
            background="#fff"
            color="rgb(55, 68, 134)"
            v-if="BusinessList.length > 0"
        >
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false"
            >
                <van-swipe-item 
                    v-for="item in BusinessList"
                >
                    <van-image
                        width="25"
                        height="25"
                        :src="item.business.avatar_cdn"
                    />
                    {{ `${item.business.nickname} 已领取了` }}
                </van-swipe-item>
            </van-swipe>
        </van-notice-bar>

        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div><span>{{ coupon.rate * 100 }}</span>折</div>
                    <div class="top_info">
                        <div>{{ coupon.title }}</div>
                        <div>COUPON</div>
                    </div>
                </div>
            </div>
            <div class="receive">
                <van-button type="primary" class="right_btn" v-if="coupon.receive" @click="OnReceive">领取</van-button>
                <van-button type="danger" disabled class="right_btn" v-else>已领取</van-button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>活动开始时间：{{ coupon.createtime_text }}</div>
            <div><span>•</span>活动结束时间：{{ coupon.endtime_text }}</div>
            <div><span>•</span>领取数量：{{ coupon.total }} 张 每人限领1张</div>
        </div>
    </div>
</template>

<script setup>

const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 优惠券详情
const coupon = ref({});

// 优惠卷id
const cid = ref(proxy.$route.query.cid);

// 已领取的用户数据
const BusinessList = ref([]);

onBeforeMount(() => { GetCouponInfo() })

const GetCouponInfo = async () =>
{
    let params = {
        cid:cid.value,
        busid:business.value.id
    }

    let result = await proxy.$http.post({
        url:'/coupon/info',
        params
    })

    if(result.code === 1)
    {
        coupon.value = result.data.coupon;
        BusinessList.value = result.data.BusinessList;
    }else{
        proxy.$fail({
            message:result.msg,
            onClose:() =>
            {
                proxy.$router.back();
            }
        });
    }
}

const OnReceive = async () =>
{
    // 判断是否处于登录状态
    if(Object.getOwnPropertyNames(business.value).length === 0 || business.value.hasOwnProperty('id') === false)
    {
        proxy.$confirm({
            title:'跳转登录提示',
            message:'是否确认跳转到登录？'
        }).then(() =>
        {
            proxy.$cookies.set('redirect',{query:{cid:cid.value},path:'/coupon/info'});

            proxy.$router.push('/business/login');
            
        }).catch(() => {});

        return false;
    }

    // 封装请求数据
    let params = {
        cid:cid.value,
        busid:business.value.id
    }

    let result = await proxy.$http.post({
        url:'/coupon/receive'
    })
}

</script>

<style scoped>
@import url('/assets/css/CouponInfo.css');
</style>